<template>
    <a-drawer :title="title" :width="450" @close="handleCancel(false)" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <!-- 登录账号 -->
            <a-form-model-item label="登录账号" prop="account" ref="account">
                <a-input placeholder="请设置收费员登录账号" v-model="form.account" :disabled="isUpdate"/>
            </a-form-model-item>
            <a-form-model-item label="登录密码" prop="password" ref="password"  v-if="!isUpdate">
                <a-input placeholder="请设置收费员登录密码" v-model="form.password"/>
            </a-form-model-item>


            <a-form-model-item label="收费员姓名" prop="name" ref="name" >
                <a-input :maxLength="10" placeholder="请设置收费员的姓名" v-model="form.name"/>
            </a-form-model-item>


            <a-form-model-item label="账号状态" prop="status" ref="status" >
                <a-radio-group v-model="form.status" button-style="solid" @change="onChangRadio">
                    <a-radio-button v-for="(item,index) in CashierStatusOPT " :key="index" :value="item.value">
                        {{item.label}}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>


            <a-form-model-item label="管理场地" prop="placeCodes" ref="placeCodes">

                <div class="placeBox">


                    <a-checkbox-group @change="onChange" :value="selectPlaceArr">

                        <a-row :gutter="[12,12]">
                            <a-col v-for="(item,index) in PlaceOPT" :key="index" :span="24">

                                <a-checkbox :value="item.value">{{item.label}}</a-checkbox>
                            </a-col>
                        </a-row>


                    </a-checkbox-group>
                </div>


            </a-form-model-item>

        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {cashierAdd, cashierUpdate} from '../public/http.js';
    import {PlaceDict} from '../public/internal'
    import {dictLoad} from '../../../util/internal.api';

    export default {
        props: ['editRecord'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '新增收费员',
                visible: true, //modal 显示状态
                selectPlaceArr: [],
                form: {
                    account: null,
                    password: "654321",
                    name: null,
                    status: null,
                    placeCodes:null,



                },
                rules: {
                    account: [
                        {
                            required: true,
                            message: '请设置收费员登录账号',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '登录账号请设置20个字符以内',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '请设置收费员登录密码',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '收费员登录密码请设置20个字符以内',
                            trigger: 'blur'
                        }
                    ],


                    name: [
                        {
                            required: true,
                            message: '请设置收费员姓名',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '收费员姓名请设置在10个字符以内',
                            trigger: 'blur'
                        }
                    ],

                    status: {
                        required: true,
                        message: '请设置账号状态',
                        trigger: 'change'
                    },

                    placeCodes: {
                        required: true,
                        message: '请选择收费员的管理的场地',
                        trigger: 'change'
                    },

                },
                PlaceOPT: [],
                CashierStatusOPT: [],
            };
        },
        methods: {

            onChangRadio(e) {
                this.form.status = e.target.value;

            },
            onChange(e) {

                this.selectPlaceArr = e

                this.form.placeCodes=e.join(',')
            },

            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            cashierUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        } else {
                            cashierAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                    }
                });
            },
            //关闭弹窗 刷新
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.isUpdate = true;
                    this.title = '编辑收费员';
                    this.selectPlaceArr=obj.placeCodes.split(',');
                    obj.password=null;
                    this.form = obj;
                }
            },
            //数据初始化
            async init() {
                await dictLoad("CashierStatus").then(res => {
                    this.CashierStatusOPT = res;
                    this.form.status = res[0].value;
                });
                await PlaceDict().then(res => this.PlaceOPT = res);
                this.fromVal();
            }
        },
        created() {
            this.init();
        }
    };
</script>


<style scoped>
    .placeBox {
        width: 100%;
        padding: 12px;
        border: 1px solid #F8F8F8;
        max-height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

</style>